<template>
  <div class="app-container">
    <v-layout class="rounded rounded-md">
      <AppBar />
      <v-main class="d-flex justify-center">
        <CardPlay></CardPlay>
      </v-main>
    </v-layout>
  </div>
</template>

<script setup lang="ts">
import CardPlay from '@/pages/CardPlay.vue';
import AppBar from './components/Layout/AppBar.vue';
import { computed, } from 'vue';
import { useGlobalConfigStore } from './stores/global-config.store';
const globalConfigStore = useGlobalConfigStore()

const backgroundColor = computed(() => {
  return globalConfigStore.isDarkMode ? '#000' : 'white'
})
</script>


<style lang="scss" scoped>
.app-container {
  height: auto;
  background-color: v-bind(backgroundColor);

  :deep(.v-toolbar__content) {
    background:
      linear-gradient(to right, #f6f6f7, #1867C0, #f6f6f7),
  }

  :deep(.v-main) {
    overflow: auto;
  }
}
</style>
